<template>
  <div class>
    <div class="navv-left">
      <ul>
        <li v-for="(item, index) in leftitems" :key="index">
          <div :class="['navv-left-items', rightitems[filter] === rightitems[index] ? 'navv-left-items_hover': '']" @mouseenter="rightsee(index)" @mouseout="rightno">
            <a href>{{item.text}}</a>
          </div>
        </li>
        <!-- <div>
          <li>
            <div class="navv-left-items">
              <a href>家用电器</a>
            </div>
          </li>
          <li>
            <div class="navv-left-items">
              <a href>手机</a>
            </div>
          </li>
          <li>
            <div class="navv-left-items">
              <a href>电脑</a>
            </div>
          </li>
          <li>
            <div class="navv-left-items">
              <a href>家具</a>
            </div>
          </li>
          <li>
            <div class="navv-left-items">
              <a href>男装</a>
            </div>
          </li>
          <li>
            <div class="navv-left-items">
              <a href>美妆</a>
            </div>
          </li>
          <li>
            <div class="navv-left-items">
              <a href>男鞋</a>
            </div>
          </li>
          <li>
            <div class="navv-left-items">
              <a href>房产</a>
            </div>
          </li>
          <li>
            <div class="navv-left-items">
              <a href>母婴</a>
            </div>
          </li>
          <li>
            <div class="navv-left-items">
              <a href>食品</a>
            </div>
          </li>
          <li>
            <div class="navv-left-items">
              <a href>艺术</a>
            </div>
          </li>
          <li>
            <div class="navv-left-items">
              <a href>医药保健</a>
            </div>
          </li>
          <li>
            <div class="navv-left-items">
              <a href>图书</a>
            </div>
          </li>
          <li>
            <div class="navv-left-items">
              <a href>机票</a>
            </div>
          </li>
          <li>
            <div class="navv-left-items">
              <a href>理财</a>
            </div>
          </li>
          <li>
            <div class="navv-left-items">
              <a href>安装</a>
            </div>
          </li>
          <li>
            <div class="navv-left-items">
              <a href>工业品</a>
            </div>
          </li>
          <li>
            <div class="navv-left-items">
              <a href>女鞋</a>
            </div>
          </li>
        </div> -->
      </ul>
    </div>
    <div class=“”>
      <ul class="rightitems">
        <li class="fore1" 
        v-for="(rightitem, index) in rightitems" 
        :key="index"
        v-show="rightitems[filter] === rightitems[index]"
        @mouseenter="rightsee(index)" @mouseout="rightno"
        >
        {{rightitem.text}}</li>
        <!-- <div>
          <li class="fore1">电器</li>
          <li class="fore1">手机</li>
          <li class="fore1">电脑</li>
          <li class="fore1">家具</li>
          <li class="fore1">男装</li>
          <li class="fore1">美妆</li>
          <li class="fore1">手男鞋机</li>
          <li class="fore1">房产</li>
          <li class="fore1">手母婴机</li>
          <li class="fore1">食品</li>
          <li class="fore1">艺术</li>
          <li class="fore1">医药保健</li>
          <li class="fore1">图书</li>
          <li class="fore1">机票</li>
          <li class="fore1">理财</li>
          <li class="fore1">安装</li>
          <li class="fore1">工业品</li>
          <li class="fore1">女鞋</li>
        </div> -->
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      leftitems:[
        {text: '家用电器'},
        {text: '手机'},
        {text: '电脑'},
        {text: '家具'},
        {text: '男装'},
        {text: '美妆'},
        {text: '男鞋'},
        {text: '房产'},
        {text: '母婴'},
        {text: '食品'},
        {text: '艺术'},
        {text: '医药保健'},
        {text: '图书'},
        {text: '机票'},
        {text: '理财'},
        {text: '安装'},
        {text: '工业品'},
        {text: '女鞋'},
      ],
      rightitems:[
        {text: '电器'},
        {text: '手机'},
        {text: '电脑'},
        {text: '家具'},
        {text: '男装'},
        {text: '美妆'},
        {text: '手男鞋机'},
        {text: '房产'},
        {text: '手母婴机'},
        {text: '食品'},
        {text: '艺术'},
        {text: '医药保健'},
        {text: '图书'},
        {text: '机票'},
        {text: '理财'},
        {text: '安装'},
        {text: '工业品'},
        {text: '女鞋'},
      ],
      filter: 'null',
      
    }
  },
  methods:{
    rightsee(index){
      this.filter = index
    },
    rightno(){
      this.filter = null
    }
  }
}
</script>

<style lang="stylus" scoped>
.navv-left {
    width: 190px;
    height: 470px;
    background-color: #fff;
    float: left;
    /* border: 1px solid rebeccapurple; */
}
.navv-left ul {
    padding: 10px 0;
}
.navv-left-items {
    width: 90%;
    height: 26px;
    position: relative;
    left: 10px;
    border: 0;
}
.navv-left-items a{
    font-size: 14px;
}
.navv-left-items_hover {
    background-color: #d9d9d9;
}
.fore1{
    /* float: left; */
    position: absolute;
    border-left: 0;
    right: 350px;
    width: 1000px;
    height: 470px;
    z-index: 100;
    // display: none;
    background-color: #fff;
}
.rightitems{
  left 349px
  position relative
}
</style>